<script lang="ts" setup>
import {getCurrentInstance, onMounted, provide, ref} from "vue";
import loadComponent from "@/view/activity/components/loading.vue";
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import html2canvas from "html2canvas";
import domtoimage from 'dom-to-image';
const {proxy} = getCurrentInstance() as any; // 类似于this
const toback = () => {
  proxy.$router.go(-1)
}
let loading = ref(false)
let txt = ref('生成中...')
provide('loadingTxt', txt)
provide('loading', loading)
let url = ref('')
let invitedCode = ref('')
let images = ref('')
let toCanvsOver = ref(false)
let toImage = async () => {
  // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
  // console.log(proxy.$refs.imageTofile)
  let width_ = document.getElementById('ppc').clientWidth
  let height_ = document.getElementById('ppc').clientHeight
  console.log(window.devicePixelRatio,'window.devicePixelRatio')
  await html2canvas(document.getElementById('ppc'), {
    backgroundColor: null,
    scale: window.devicePixelRatio,
    useCORS: true,
    width: width_,
    height: height_,

  }).then((canvas) => {

    images.value = canvas.toDataURL("image/png");
    proxy.$nextTick(() => {
      toCanvsOver.value = true
      loading.value = false
    })
  });

}
let toHua = ()=>{
  let width_ = document.getElementById('ppc').clientWidth
  let height_ = document.getElementById('ppc').clientHeight
  domtoimage.toJpeg(document.getElementById('ppc'),{quality:1,width:width_,height:height_}).then(res=>{
    console.log(res,'rrrr')
    images.value = res;
    proxy.$nextTick(() => {
      toCanvsOver.value = true
      loading.value = false
    })
  })
}
let getImgInfo = () => {
  proxy.$nextTick(() => {
    toImage()
    // toHua()
  })
}
//下载图片:通过canvas
const downJpgByCanvas = () => {
  let oA = document.createElement("a");
  oA.download = "img_" + new Date().getTime() + '.png';// 设置下载的文件名，默认是'下载'
  oA.href = images.value
  document.body.appendChild(oA);
  oA.click();
  oA.remove(); // 下载之后把创建的元素删除
  // console.log(images.value,'images.value')
}
onMounted(() => {
  loading.value = true
  url.value = localStorage.getItem('url') || "http://www.upsao.cn/#/download"
  invitedCode.value = localStorage.getItem('code')
  if (proxy.$route.query.token) {
    let token = proxy.$route.query.token
    localStorage.setItem('token', token)
  }
})
</script>

<template>
  <div class="hid">
        <img :src="images"  class="allImgShow" :style="{zIndex:(toCanvsOver==true?11:-11)}"  alt="">
    <loadComponent></loadComponent>
    <div id="ppc" class="shareView">

      <img :class="toCanvsOver==true?'backShow':'back'" alt="" src="@/assets/images/activityImg/back.png"
           @click="toback">
      <img alt="" class="icon" src="@/assets/images/shareView/icon.png">
      <img src="@/assets/i2.png" class="title" alt="">
      <div class="h3">
        邀请链接
      </div>
      <div class="h6" style="margin-top: 10px;margin-bottom: 14px">
        {{ url }}
      </div>
      <div class="code" style="width: 182px;height: 182px">
        <vue-qr :callback="getImgInfo" :correctLevel="1" :dotScale="1" :size="400"
                :text="url"
                backgroundColor="rgba(255, 255, 255, 0)"></vue-qr>
      </div>
      <div class="h3" style="margin-top: 29px;margin-bottom: 14px">
        邀请码
      </div>
      <div class="invited">
        {{ invitedCode }}
      </div>
      <img src="@/assets/i1.png"  class="imgs" style="display: block" alt="">
      <!--<div class="imgs">-->
      <!--  <div class="txt1">使用浏览器或者支付宝</div>-->
      <!--  <div class="txt2">扫描二维码</div>-->
      <!--</div>-->
      <div :class="toCanvsOver==true?'btmShow':'btm'">长按保存到相册</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hid {
  width: 100vw;
  height: auto;
  overflow: hidden;
  background-color: #4957F5;

  .back {
    width: 20px;
    height: 25px;
    position: absolute;
    left: 13px;
    top: 1140px;
    z-index: -11;
  }

  .backShow {
    width: 20px;
    height: 25px;
    position: absolute;
    left: 13px;
    top: 40px;
    z-index: 11;
  }

  .allImg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -11;
  }

  .allImgShow {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    //background: #1A0D84;
    z-index: 11;
  }
}

.shareView {

  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/images/shareView/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;

  .icon {
    width: 39px;
    height: 39px;
    margin: 27px auto 10px;
    display: block;
  }

  .title {
    width: 347px;
    position: relative;
    height: 71px;
    display: block;
    //background-image: url("@/assets/i1.png");
    //background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 0 auto 14px;

    .txt1 {
      width: 100%;
      font-size: 36px;
      text-align: center;
      font-family: txtP, "Microsoft YaHei", sans-serif;
      color: white;
      font-weight: bolder;
      /* 设置文字边框效果 */

    }

    .txt2 {
      width: 100%;
      font-size: 26px;
      text-align: center;
      margin-top: -5px;
      font-family: txtP, "Microsoft YaHei", sans-serif;
      color: white;
      font-weight: bolder;

    }
  }

  .h3 {
    width: 100%;
    height: 14px;
    text-align: center;
    color: white;
    font-weight: 500;
    font-size: 15px;
    line-height: 21px;
  }

  .h6 {
    width: 80%;
    margin: 10px auto;
    font-size: 15px;
    line-height: 21px;
    color: white;
    text-align: center;
  }

  .code {
    margin: 53px auto 0;
    background: white;

    img {
      mix-blend-mode: multiply
    }

  }

  .imgTxt {
    position: absolute;
  }

  .invited {
    width: 153px;
    height: 28px;
    background-color: #333EC6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin: 0 auto;
  }

  .imgs {
    width: 252px;
    height: 26px;
    margin: 57px auto 57px;
    //background-image: url("@/assets/images/shareView/txt2.png");
    //background-repeat: no-repeat;
    background-size: 100% auto;
    .txt1 {
      width: 100%;
      font-size: 22px;
      text-align: center;
      font-family: txtP, "Microsoft YaHei", sans-serif;
      color: white;
      font-weight: bolder;
      /* 设置文字边框效果 */

    }

    .txt2 {
      width: 100%;
      font-size: 22px;
      text-align: center;
      margin-top: -5px;
      font-family: txtP, "Microsoft YaHei", sans-serif;
      color: white;
      font-weight: bolder;

    }
  }

  .btm {
    width: 200px;
    height: 40px;
    position: absolute;
    bottom: 1000px;
    color: white;
    background-image: linear-gradient(to right, #174CED, #201FA1);
    text-align: center;
    left: calc(50% - 100px);
    z-index: -11;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 20px;
  }

  .btmShow {
    width: 200px;
    height: 40px;
    border: 2px solid white;
    position: absolute;
    bottom: 5%;
    color: white;
    background-image: linear-gradient(to right, #174CED, #201FA1);
    text-align: center;
    left: calc(50% - 100px);
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 20px;
  }
}
</style>
